<template>
    <div class="navbar">
        <bread-crumbs class="bread-crumbs"></bread-crumbs>
        <div class="navbar-right">
            <div class="navbar-right__role">{{ this.$storage.get('role') }}</div>
            <div class="navbar-right__nickname">{{ this.$storage.get('adminName') }}</div>
            <div class="navbar-right__logout cursor-pointer" @click="onLogout">退出登录</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            ruleForm: {},
            user: {},
        };
    },
    created() {},
    mounted() {
        let sessionTable = this.$storage.get('sessionTable');
        this.$http({
            url: sessionTable + '/session',
            method: 'get',
        }).then(({ data }) => {
            if (data && data.code === 0) {
                this.user = data.data;
                this.$storage.set('userid', data.data.id);
            } else {
                let message = this.$message;
                message.error(data.msg);
            }
        });
    },
    methods: {
        onLogout() {
            let storage = this.$storage;
            let router = this.$router;
            storage.clear();
            router.replace({
                name: 'login',
            });
        },
        onIndexTap() {
            window.location.href = `${this.$base.indexUrl}`;
        },
    },
};
</script>

<style lang="scss" scoped>
.navbar {
    background: #ffffff;
    padding: 0 20px 0 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    left: 0;
    border-width: 0;
    position: fixed;
    width: calc(100% - 0px);
    height: 64px;
    z-index: 2;

    .bread-crumbs {
        margin: 0 auto 0 20px;
    }

    &-title {
        height: 44px;
        line-height: 44px;
        font-size: 26px;
        font-weight: bold;
    }

    &-right {
        display: flex;
        gap: 10px;

        &__role,
        &__nickname {
            cursor: default;
        }

        &__logout:hover {
            color: #1177b0;
        }
    }
}
</style>
